<template>
	<view class="content">
		<view class="row">
			<view class="item center" v-for="(e,i) in list" :key="i">
				<img class="img round" :src="item.img" alt="">
				<text class="name">{{ item.name }}</text>
			</view>
		</view>
		<view class="list">
			<item class="item center" v-for="(e,i) in list" :key="i"></item>
			<view class="between">
				<view class="title">
					猜你喜欢
				</view>
				<view class="right text-right">
					<text>查看全部</text>
				</view>
			</view>
			<view class="row">
				<view class="l-item center" v-for="(e,i) in list" :key="i">
					<img class="img round" :src="item.img" alt="">
					<text class="name">{{ item.name }}</text>
					<view class="btn"> +  </view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import item from './core/item.vue'
	export default {
		components:{
			item
		},
		props:{
			
		},
		created() {
			 console.log("care");
		},
	}
</script>
<style lang="scss" scoped>
	 
	.content{
		background: #F4F4F7;
	}
	.row{
		.item{
			margin: 0 5px;
			.img{
				width:80px ;
				height: 80px;
			}
			.name{
				font-size: 24rpx;
				font-family: PingFangSC-Regular-, PingFangSC-Regular;
				font-weight: normal;
				color: #232832;
				margin-top: 10px;
			}
		}
		
	}
	.list{
		height: calc(100vh - 206px);
		overflow: auto;
		padding-bottom: 100px;
	}
	.between{
		padding: 10px 20px;
		.title{
			font-size: 30rpx;
			font-family: PingFangSC-Regular-, PingFangSC-Regular;
			font-weight: normal;
			color: #232832;
		}
		.right{
			font-size: 24rpx;
			font-family: PingFangSC-Regular-, PingFangSC-Regular;
			font-weight: normal;
			color: #787B86;
		}
	}
	.row{
		.l-item{
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 10px;
			padding: 10px;
			.img{
				width: 100px;height: 100px;
			}
			.name{
				font-size: 30rpx;
				font-family: PingFangSC-Regular-, PingFangSC-Regular;
				font-weight: normal;
				color: #232832;
				margin: 10px 0;
			}
			.btn{
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				opacity: 1;
				border: 2rpx solid #FF4E4D;
				padding: 3PX 20px 6px 20px;
				color: #FF4E4D;
				font-size: 30px;
			}
		}
	}
</style>